<template>
  <div id="app">
    <div class="left">
      
      <nav>
        <router-link to="/" class="luyou">Home</router-link>
        <router-link to="/about" class="luyou">About</router-link>
        <router-link  class="luyou"  :to="{ name: 'me', params: { id: 30 } }">New</router-link>
        <router-link class="luyou" :to="{ name: 'first', params: { id: 30,number:100} }">first</router-link>
        <router-link class="luyou" :to="{ name: 'second', params: { id: 123,number:456,me:789} }">second</router-link>
        <router-link to="/third/Jack" class="luyou">third</router-link>
        <router-link class="luyou" :to="{ name: 'guo', params: {name:'国'} }">guo</router-link>
        <router-link class="luyou" :to="{ name: 'zhong', params: {name:'中'} }">zhong</router-link> 
        <router-link  class="luyou"  :to="{ name: 'about' }">关于</router-link>  
        <router-link  class="luyou" :to="{ name: 'add' }">新增1</router-link>   
        <router-link  class="luyou" :to="{ name: 'weather' }">天气预报</router-link>
        <router-link  class="luyou" :to="{ name: 'buju' }">布局</router-link>
        <router-link  class="luyou" :to="{ name: 'login' }">登录</router-link>
      </nav>
     
    </div>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<style>
.luyou{
  margin-bottom: 20%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
}

.left {
  width: 20vw;
  height: 100vh;
  background-color: #2c3e50;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  overflow:scroll;
}
.right{
  text-align: center;
  width:80vw;
  height:100vh;
  border:solid 1px blue;
}
nav {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}

nav a {
  font-weight: bold;
  color: #e8e9eb;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
